<template>
  <div class="content-container">
    <!-- 面包屑导航 -->
    <!-- <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      :breadcrumb="{ routes }"
    /> -->
    <!-- 面包屑导航 -->

    <!-- 表格 -->
    <a-card class="table">
      <a-table
        :pagination="pagination"
        @change="handleTableChange"
        :columns="columns"
        bordered
        :data-source="tableData"
        :rowKey="tableData => tableData.id.toString()"
      >
        <template #status="{text}">{{ text ? '正常' : '关闭' }}</template>
        <template #setting="{record}">
          <a-switch
            :loading="record.loading"
            @change="switchChange(record)"
            v-model:checked="record.comment_status"
          />
        </template>
      </a-table>
      <div class="loading" v-if="loading">
        <a-spin size="large" />
      </div>
    </a-card>
    <!-- 表格 -->
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { columns, routes } from './data'
import { reactive, toRefs, onMounted } from 'vue'

import { getArticles } from '@/api/articles'
import { changeCommentStatus } from '@/api/comment'

export default {
  name: ' Comment',
  setup() {
    const labelCol = { span: 2 }
    const wrapperCol = { span: 14 }

    const state = reactive({
      loading: true,
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: total => `共有 ${total} 条数据`
      }
    })

    const switchChange = async data => {
      const id = data.id.toString()
      data.loading = true
      const allowComment = !data.comment_status
      const res = await changeCommentStatus(id, allowComment)
      const temp = res.data.allow_comment
      data.comment_status = temp
      data.loading = false
      const msg = `文章 ${data.title} ${temp ? '开启评论' : '关闭评论'}`
      message.success(msg)
    }

    const getArticlesData = async current => {
      const params = {}
      params.page = current || 1
      params.response_type = 'comment'
      const res = await getArticles(params)
      hidePageLoading()
      /* eslint-disable */
      const { page, total_count, results } = res.data
      results.map(item => (item.loading = false))
      state.pagination.total = total_count
      state.pagination.current = page
      state.tableData = results
    }

    // 翻页
    const handleTableChange = pagination => {
      openPageLoading()
      const { current } = pagination
      getArticlesData(current)
    }

    const openPageLoading = () => {
      state.loading = true
    }
    const hidePageLoading = () => {
      state.loading = false
    }
    const openBtnLoading = () => {
      state.btnLoading = true
    }
    const hideBtnLoading = () => {
      state.btnLoading = false
    }
    // 获取文章数据
    getArticlesData()

    onMounted(() => {
      // getArticlesData()
    })
    return {
      ...toRefs(state),
      routes,
      columns,
      labelCol,
      wrapperCol,
      handleTableChange,
      switchChange,

      getArticlesData
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  position: relative;
}
.loading {
  z-index: 99;
  // position: fixed;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
